<template>
    <div>
        <Form :label-width="100" ref="formInline" :model="formInline">
            <div v-if="switchFlag">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="上传年份：">
                            <DatePicker type="year" placeholder="请选择上传年份" style="width: 100%" v-model="formInline.uploadYear"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="总监姓名：">
                            <Input v-model="formInline.userName" placeholder="请输入总监姓名"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="所属公司：">
                            <Input v-model="formInline.orgName" placeholder="请输入所属公司"/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="是否上传：">
                            <Select v-model="formInline.noUpload" >
                                <Option value="0" >未上传</Option>
                                <Option value="1" >已上传</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="16">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="上传年份：">
                            <DatePicker type="year" placeholder="请选择上传年份" style="width: 100%" v-model="formInline.uploadYear"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="总监姓名：">
                            <Input v-model="formInline.userName" placeholder="请输入总监姓名"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns"
               no-data-text="没有查询到相关数据！"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <div v-show="downloading"
             style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
            <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
                     :options="options" :value="batchProcess"></svg-bar>
        </div>
    </div>
</template>

<script>
    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import svgBar from 'svg-progress-bar'

    export default {
        name: "securityDirectorReportStatistics",
        components:{
            svgBar
        },
        data(){
            return {
                downloading:false,
                formInline: {},
                loading: false,
                switchFlag: false,
                fileProcess:0,
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'userName',
                        minWidth: 90,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.userName || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任开始时间',
                        align: 'center',
                        key: 'appointmentStartDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentStartDate != null ? this.formatDate(new Date(params.row.appointmentStartDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任开始时间',
                        align: 'center',
                        key: 'appointmentEndDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentEndDate != null ? this.formatDate(new Date(params.row.appointmentEndDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '性别',
                        align: 'center',
                        key: 'gender',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.gender || '--')
                            ]);
                        }
                    },
                    {
                        title: '政治面貌',
                        align: 'center',
                        key: 'politicalAffiliationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.politicalAffiliationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '出生年月',
                        align: 'center',
                        key: 'birthday',
                        minWidth: 140,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.birthday != null ? this.formatDate(new Date(params.row.securityDirectorInfo.birthday), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '手机号码',
                        align: 'center',
                        key: 'phoneNumber',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.phoneNumber || '--')
                            ]);
                        }
                    },
                    {
                        title: '学历',
                        align: 'center',
                        key: 'educationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.educationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '专业',
                        align: 'center',
                        key: 'major',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.major || '--')
                            ]);
                        }
                    },
                    {
                        title: '现职务（岗位）',
                        align: 'center',
                        key: 'currentPosition',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.currentPosition || '--')
                            ]);
                        }
                    },
                    {
                        title: '工作年限',
                        align: 'center',
                        key: 'workYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.workYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '现岗位工作年限',
                        align: 'center',
                        key: 'currentPositionWorkYear',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.currentPositionWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '安全工作年限',
                        align: 'center',
                        key: 'relevantWorkYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.relevantWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 180,
                        title: '任职资格',
                        align: 'center',
                        key: 'groupOpinion',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.groupOpinion || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 100,
                        title: '述职报告',
                        align: 'center',
                        key: 'countReport',
                        fixed: 'right',
                        render: (h, params) => {
                            if(params.row.countReport == 0){
                                return h('div', [
                                    h('span', '未上报')
                                ]);
                            }else{
                                return h('div', [
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px'
                                        },
                                        on: {
                                            click: () => {
                                                this.$http.get(Api.uploadPTWFiles + '/' + params.row.fileId + '/files/guideFile', {params: {field: 'employmentReport'}}).then((res) => {
                                                    console.log(res.data.data[0]);
                                                    this.downloadFile(res.data.data[0]);
                                                });
                                            }
                                        }
                                    }, '下载报告')
                                ]);
                            }
                        }
                    },
                ],
                infos: [],
                tableHeight: '',
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                userInfo: sessionStorage('userId').getObject('userId'),
            }
        },
        computed: {
            options: function() {
                return {
                    radius: 50,//大小
                    duration: 2,//变化时间长度
                    circleWidth: 5,//圆环宽度
                    pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
                    circleLineCap: 'round',//进度条 形状  圆环 或者矩形
                    text: function (value) {
                        return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
                    },
                    textColor: 'rgb(33, 150, 243)'
                }
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.formInline.uploadYear = new Date();
            this.query();
        },
        methods: {
            query(){
                this.loading = true;
                let data = {
                    year: this.formInline.uploadYear.getFullYear(),
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    orgId: this.userInfo.companyId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.securityDirectorRegister + '/statistics', {
                    params: data
                }).then(function (res) {
                    this.infos = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            cancel(){
                this.formInline = {
                    uploadYear: new Date()
                };
                this.query();
            },
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 44;
                }else{
                    this.tableHeight = this.tableHeight + 44;
                }
            },
            downloadFile(file) {
                this.downloading = true;
                let url = Api.uploadPTWFiles + '/file/' + file.id;
                let _this = this;
                this.$http.get(url, {
                    responseType: 'blob',      //告诉服务器我们需要的响应格式
                    progress:function(e){
                        _this.fileProcess = 100 * (e.loaded / e.total);
                        if(_this.fileProcess == 100){
                            _this.downloading = false;
                        }
                    }
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
        }
    }
</script>

<style scoped>

</style>
